<!--
 * @Descripttion:  学生信息列表
 * @version: 
 * @Author: hzx
 * @Date: 2021-03-05 16:05:17
 * @LastEditors: hzx
 * @LastEditTime: 2021-05-14 18:24:54
-->
<template>
    <a-button class="button" type="primary" @click="showStuModal">
        增加
    </a-button>
    <!-- 增加信息弹窗 -->
    <a-modal
        v-model:visible="visible"
        ok-text="确认"
        cancel-text="取消"
        title="学生信息"
        @ok="addStudent(addStuDate)"
    >
        <a-form
            :model="addStuDate"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-item label="姓名">
                <a-input
                    placeholder="请输入你的姓名"
                    v-model:value="addStuDate.stu_name"
                />
            </a-form-item>
            <a-form-item label="性别">
                <a-select
                    v-model:value="addStuDate.stu_sex"
                    placeholder="请选择性别"
                >
                    <a-select-option value="1">男</a-select-option>
                    <a-select-option value="0">女</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="学号">
                <a-input
                    placeholder="请输入你的学号"
                    v-model:value="addStuDate.stu_id"
                />
            </a-form-item>
            <a-form-item label="班级">
                <a-input
                    placeholder="请输入你的班级"
                    v-model:value="addStuDate.class_id"
                />
            </a-form-item>

            <a-form-item label="入学时间">
                <a-date-picker
                    v-model:value="addStuDate.rx_time"
                    show-time
                    type="date"
                    placeholder="请选择您的入学时间"
                    style="width: 100%"
                />
            </a-form-item>
        </a-form>
    </a-modal>
    <a-input-search
        class="search"
        v-model:value="classId"
        placeholder="请输入班级编号"
        style="width: 200px"
        @search="onSearch"
    />
    <a-input-search
        class="search"
        v-model:value="stuId"
        placeholder="请输入学号"
        style="width: 200px"
        @search="onSearch"
    />
    <a-table
        :rowKey="(record) => record.stu_id"
        :columns="columns"
        :data-source="state.data"
        bordered
    >
        <template #action="{ record }">
            <span>
                <a-button class="button" @click="showupStuModal(record.stu_id)"
                    >修改</a-button
                >
                <a-button
                    class="button"
                    type="dashed"
                    @click="error(record.stu_id)"
                    >删除</a-button
                >
            </span>
        </template>
    </a-table>
    <!-- 修改信息弹窗 -->
    <a-modal
        v-model:visible="upvisible"
        title="修改学生信息"
        ok-text="确认"
        cancel-text="取消"
        @ok="updateStuModal(upStuData)"
    >
        <a-form
            :model="upStuData"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-item label="姓名">
                <a-input
                    placeholder="请输入你的姓名"
                    v-model:value="upStuData.stu_name"
                />
            </a-form-item>
            <a-form-item label="性别">
                <a-select
                    v-model:value="upStuData.stu_sex"
                    placeholder="请选择性别"
                >
                    <a-select-option value="1">男</a-select-option>
                    <a-select-option value="0">女</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="学号">
                <a-input
                    placeholder="请输入你的学号"
                    v-model:value="upStuData.stu_id"
                />
            </a-form-item>
            <a-form-item label="班级">
                <a-input
                    placeholder="请输入你的班级"
                    v-model:value="upStuData.class_id"
                />
            </a-form-item>

            <a-form-item label="入学时间">
                <a-date-picker
                    v-model:value="upStuData.rx_time"
                    show-time
                    type="date"
                    placeholder="请选择您的入学时间"
                    style="width: 100%"
                    format="YYYY-MM-DD"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { defineComponent, createVNode, reactive, onMounted, ref } from "vue";
import { Modal } from "ant-design-vue";
import { useStore } from "vuex";
import {
    getStudents,
    selectStudentId,
    selectClassId,
    insterStudent,
    updateStudent,
    delStudent,
} from "@/api/student";
const columns = [
    {
        title: "班级",
        dataIndex: "class_id",
        key: "class",
    },
    {
        title: "姓名",
        dataIndex: "stu_name",
        key: "name",
    },
    {
        title: "学号",
        dataIndex: "stu_id",
        key: "id",
        ellipsis: true,
    },
    {
        title: "性别",
        dataIndex: "stu_sex",
        key: "sex",
        ellipsis: true,
        customRender({ record }) {
            return record.stu_sex === 1 ? "男" : "女"; //0是男，1是女
        },
    },
    {
        title: "入学时间",
        dataIndex: "rx_time",
        key: "rx_times",
        ellipsis: true,
    },
    {
        title: "操作",
        key: "action",
        slots: { customRender: "action", dataIndex: "stu_id" },
    },
];

export default defineComponent({
    setup() {
        let state = reactive({
            data: [],
        });

        const onSubmit = () => {
            //console.log("submit!", toRaw(addStuDate));
        };
        
        onMounted(async () => {
            //获取学生信息
            state.data = await getStudents();
        });

        //查询班级  学生信息模块
        const classId = ref("");
        const stuId = ref("");
        async function onSearch(searchValue) {
            if (searchValue.length === 6) {
                state.data = await selectClassId(searchValue);
            } else {
                state.data = await selectStudentId(searchValue);
            }
        }

        //增加学生信息
        const visible = ref(false);
        const showStuModal = () => {
            //打开增加对话框
            visible.value = true;
        };
        const addStudent = async (addStuDate) => {
            await insterStudent(addStuDate);
            visible.value = false;
            state.data = await getStudents();
        };
        const addStuDate = reactive({
            stu_name: "",
            stu_sex: "",
            stu_id: "",
            class_id: "",
        });
        
        //修改学生信息
        const upvisible = ref(false);
        const showupStuModal = async (stu_id) => {
            let [data] = await selectStudentId(stu_id);
            upStuData.stu_name = data.stu_name;
            upStuData.stu_sex = data.stu_sex.toString();
            upStuData.stu_id = data.stu_id;
            upStuData.class_id = data.class_id;
            upStuData.rx_time = data.rx_time;
            //打开修改对话框
            upvisible.value = true;
        };
        const updateStuModal = async (upStuData) => {
            let upStuDatas = upStuData
            upStuDatas.rx_time = Date.parse(upStuDatas.rx_time).toString().substring(0,10)
            console.log(upStuDatas.rx_time)
            await updateStudent(upStuDatas);
            upvisible.value = false;
            state.data = await getStudents();
        };
        const store = useStore();
        let upStuData = reactive({
            t_id: store.state.resourceId.t_id,
            stu_name: "",
            stu_sex: "",
            stu_id: "",
            class_id: "",
            rx_time: null,
        });

        // 删除学生信息
        const error = (stu_id) => {
            Modal.confirm({
                title: "确定删除该学生?",
                icon: createVNode(ExclamationCircleOutlined),
                okText: "确定",
                okType: "danger",
                cancelText: "取消",
                async onOk() {
                    await delStudent(stu_id);
                    //console.log(stu_id + "删除成功");
                    state.data = await getStudents();
                },
                onCancel() {
                    //console.log("取消删除");
                },

                //message.error(stu_id);
            });
        };
        return {
            showStuModal,
            addStudent,
            visible,
            showupStuModal,
            upvisible,
            updateStuModal,
            classId,
            stuId,
            onSearch,
            state,
            columns,
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 14,
            },
            addStuDate,
            upStuData,
            onSubmit,
            error,
        };
    },
});
</script>

<style lang="less" scoped>
.button {
    margin-right: 20px;
}
.search {
    margin-bottom: 15px;
    margin-right: 20px;
}
</style>